<template>
	<view class="content">
		<view class="topText">
			<view class="sizeFont">
				<view class="topl">
					<view @click="gotoBack" class="backed">
						<u-icon name="arrow-left" color="#000000" size="40"></u-icon>
					</view>
					<view class="nameicon">
						<view class="namel">
							<image src="../../../static/images/btnBgc.png" class="imgNae"></image>
						</view>
						<view class="namer">
							<view class="naet">
								奥迪i8
							</view>
							<view class="naeb">
								<image src="../../../static/images/copyVip.png" class="icoName"></image>
								<text>认证车主</text>
							</view>
						</view>
					</view>
				</view>
				<view class="topr" @click="strid" v-if="statused">
					关注
				</view>
				<view class="topred" @click="strid" v-else>
					已关注
				</view>
			</view>
		</view>
		<!-- 文章内容详情 -->
		<view class="contented">
		</view>
		<view class="clera">
			<clearcar></clearcar>
		</view>
		<view class="talked">
			<view class="talkedtit">
				<view class="titson">
					全部评论
				</view>
			</view>
			<view class="listTak">
				<view class="listTak_son_l">
					<image src="../../../static/images/cleard.png" class="listTak_son_img"></image>
				</view>
				<view class="listTak_son_r">
					<view class="son_r_top">
						<view class="son_r_top_l">
							养车***无忧
						</view>
						<view class="son_r_top_r">
							<view class="fatherimg" v-if="showLiked">
								<image src="../../../static/images/btnBgc.png" class="likedTitle" @click="changeLike">
								</image>
								<text class="fatsize">11111</text>
							</view>
							<view class="fatherimg" v-else>
								<image src="../../../static/images/doyear.png" class="likedTitle" @click="changeLike">
								</image>
								<text class="fatsize">1111</text>
							</view>
							<u-icon name="chat" size="45"></u-icon>
						</view>
					</view>
					<view class="son_r_bot">
						驾驶证电子化这个确实能方便不少,以后再也不会因找不到驾驶证而烦恼了11<text class="textSize">今天 3:30</text>
					</view>
				</view>
			</view>
			<view class="listTak">
				<view class="listTak_son_l">
					<image src="../../../static/images/cleard.png" class="listTak_son_img"></image>
				</view>
				<view class="listTak_son_r">
					<view class="son_r_top">
						<view class="son_r_top_l">
							养车***无忧
						</view>
						<view class="son_r_top_r">
							<view class="fatherimg" v-if="showLiked">
								<image src="../../../static/images/btnBgc.png" class="likedTitle" @click="changeLike">
								</image>
								<text class="fatsize">11111</text>
							</view>
							<view class="fatherimg" v-else>
								<image src="../../../static/images/doyear.png" class="likedTitle" @click="changeLike">
								</image>
								<text class="fatsize">1111</text>
							</view>
							<u-icon name="chat" size="45"></u-icon>
						</view>
					</view>
					<view class="son_r_bot">
						驾驶证电子化这个确实能方便不少,以后再也不会因找不到驾驶证而烦恼了222<text class="textSize">今天 3:30</text>
					</view>
				</view>
			</view>
			<view class="listTak">
				<view class="listTak_son_l">
					<image src="../../../static/images/cleard.png" class="listTak_son_img"></image>
				</view>
				<view class="listTak_son_r">
					<view class="son_r_top">
						<view class="son_r_top_l">
							养车***无忧
						</view>
						<view class="son_r_top_r">
							<view class="fatherimg" v-if="showLiked">
								<image src="../../../static/images/btnBgc.png" class="likedTitle" @click="changeLike">
								</image>
								<text class="fatsize">11111</text>
							</view>
							<view class="fatherimg" v-else>
								<image src="../../../static/images/doyear.png" class="likedTitle" @click="changeLike">
								</image>
								<text class="fatsize">1111</text>
							</view>
							<u-icon name="chat" size="45"></u-icon>
						</view>
					</view>
					<view class="son_r_bot">
						驾驶证电子化这个确实能方便不少,以后再也不会因找不到驾驶证而烦恼了333<text class="textSize">今天 3:30</text>
					</view>
				</view>
			</view>	<view class="listTak">
				<view class="listTak_son_l">
					<image src="../../../static/images/cleard.png" class="listTak_son_img"></image>
				</view>
				<view class="listTak_son_r">
					<view class="son_r_top">
						<view class="son_r_top_l">
							养车***无忧
						</view>
						<view class="son_r_top_r">
							<view class="fatherimg" v-if="showLiked">
								<image src="../../../static/images/btnBgc.png" class="likedTitle" @click="changeLike">
								</image>
								<text class="fatsize">11111</text>
							</view>
							<view class="fatherimg" v-else>
								<image src="../../../static/images/doyear.png" class="likedTitle" @click="changeLike">
								</image>
								<text class="fatsize">1111</text>
							</view>
							<u-icon name="chat" size="45"></u-icon>
						</view>
					</view>
					<view class="son_r_bot">
						驾驶证电子化这个确实能方便不少,以后再也不会因找不到驾驶证而烦恼了<text class="textSize">今天 3:30</text>
					</view>
				</view>
			</view>	<view class="listTak">
				<view class="listTak_son_l">
					<image src="../../../static/images/cleard.png" class="listTak_son_img"></image>
				</view>
				<view class="listTak_son_r">
					<view class="son_r_top">
						<view class="son_r_top_l">
							养车***无忧
						</view>
						<view class="son_r_top_r">
							<view class="fatherimg" v-if="showLiked">
								<image src="../../../static/images/btnBgc.png" class="likedTitle" @click="changeLike">
								</image>
								<text class="fatsize">11111</text>
							</view>
							<view class="fatherimg" v-else>
								<image src="../../../static/images/doyear.png" class="likedTitle" @click="changeLike">
								</image>
								<text class="fatsize">1111</text>
							</view>
							<u-icon name="chat" size="45"></u-icon>
						</view>
					</view>
					<view class="son_r_bot">
						驾驶证电子化这个确实能方便不少,以后再也不会因找不到驾驶证而烦恼了<text class="textSize">今天 3:30</text>
					</view>
				</view>
			</view>	<view class="listTak">
				<view class="listTak_son_l">
					<image src="../../../static/images/cleard.png" class="listTak_son_img"></image>
				</view>
				<view class="listTak_son_r">
					<view class="son_r_top">
						<view class="son_r_top_l">
							养车***无忧
						</view>
						<view class="son_r_top_r">
							<view class="fatherimg" v-if="showLiked">
								<image src="../../../static/images/btnBgc.png" class="likedTitle" @click="changeLike">
								</image>
								<text class="fatsize">11111</text>
							</view>
							<view class="fatherimg" v-else>
								<image src="../../../static/images/doyear.png" class="likedTitle" @click="changeLike">
								</image>
								<text class="fatsize">1111</text>
							</view>
							<u-icon name="chat" size="45"></u-icon>
						</view>
					</view>
					<view class="son_r_bot">
						驾驶证电子化这个确实能方便不少,以后再也不会因找不到驾驶证而烦恼了<text class="textSize">今天 3:30</text>
					</view>
				</view>
			</view>
		</view>
		<view class="botom">
			<view class="botominp">
				<u-input v-model="value" :type="type" :border="border" :clearable="false" class="inped" placeholder=" "
					@focus="focused" @blur="blured" />
				<view class="sond" v-if="selected">
					<image src="../../../static/images/whiter.png" class="son_image"></image>
					<text class="tetImage">说点什么...</text>
				</view>
			</view>
			<view class="botomlike">
				<!-- <u-rate :count="count" active-icon='heart-fill' inactive-icon="heart" size="50" @change="changeLike">
				</u-rate> -->
				<image src="../../../static/images/btnBgc.png" v-if="showLiked" class="likedTitle" @click="changeLike">
				</image>
				<image src="../../../static/images/doyear.png" v-else class="likedTitle" @click="changeLike">
				</image>
				<text class="textLiked">{{2333}}</text>
			</view>
			<view class="botomlike">
				<u-icon name="chat" size="50"></u-icon>
				<text class="textLiked">{{2333}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import clearcar from '../../../component/clearcar.vue'
	export default {
		data() {
			return {
				selected: true,
				value: '',
				type: 'text',
				border: false,
				// count: 1,
				statused: false,
				showLiked: false
			}
		},
		components: {
			clearcar
		},
		methods: {
			changeLike() {
				this.showLiked = !this.showLiked
			},
			focused() {
				this.selected = false
			},
			blured() {
				if (this.value.length < 1) {
					this.selected = true
				} else {
					this.selected = false
				}
			},
			strid() {
				if (this.statused) {
					this.statused = false
				} else {
					this.statused = true
				}
			},
			gotoBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fafafa;
		width: 100%;
		padding: 140rpx 0 100rpx 0;
		box-sizing: border-box;
		min-height: 100vh;

		.topText {
			position: fixed;
			z-index: 999;
			top: 0;
			left: 0;
			right: 0;
			height: 140rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: 0 40rpx 15rpx 40rpx;
			background-color: #FFFFFF;

			.sizeFont {
				width: 100%;
				display: flex;
				align-items: center;

				.topl {
					display: flex;
					align-items: center;
					margin-right: 15rpx;

					.backed {
						margin-right: 15rpx;
					}

					.nameicon {
						display: flex;
						align-items: center;

						.namel {
							width: 65rpx;
							height: 65rpx;
							margin-right: 10rpx;

							.imgNae {
								width: 65rpx;
								height: 65rpx;
							}
						}

						.namer {
							display: flex;
							flex-direction: column;

							.naet {
								font-size: 22rpx;
								color: #616161;
							}

							.naeb {
								display: flex;
								align-items: center;
								font-size: 19rpx;
								color: #676767;

								.icoName {
									width: 25rpx;
									height: 25rpx;
									margin-right: 10rpx;
								}
							}
						}
					}
				}

				.topr {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 110rpx;
					height: 50rpx;
					background-color: #ffd9d9;
					margin-left: 150rpx;
					border-radius: 55rpx;
					color: #ff0000;
					font-size: 24rpx;
				}

				.topred {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 110rpx;
					height: 50rpx;
					background-color: #e5e5e5;
					margin-left: 150rpx;
					border-radius: 55rpx;
					color: #000000;
					font-size: 24rpx;
				}
			}
		}

		.contented {
			width: 100%;
			background-color: #FFFFFF;
		}

		.clera {
			width: 100%;
			padding: 10rpx 20rpx;
		}

		.talked {
			width: 100%;
			background-color: #FFFFFF;
			margin-bottom: 10rpx;

			.talkedtit {
				height: 65rpx;
				width: 100%;
				padding: 10rpx 0;
				border-bottom: 1rpx solid #e5e5e5;

				.titson {
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					padding-left: 20rpx;
					box-sizing: border-box;
					font-size: 29rpx;
					color: #000000;
					font-weight: 400;
				}

				.titson::before {
					position: absolute;
					left: 0;
					top: 0;
					content: '';
					width: 4rpx;
					height: 45rpx;
					background: linear-gradient(to bottom, #ff6000, #ff0000);
				}
			}

			.listTak {
				padding: 35rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				border-bottom: 2rpx solid #fafafa;

				.listTak_son_l {
					width: 80rpx;
					margin-right: 30rpx;

					.listTak_son_img {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.listTak_son_r {
					width: 100%;
					display: flex;
					flex-direction: column;

					.son_r_top {
						height: 50rpx;
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;

						.son_r_top_l {
							font-size: 29rpx;
							color: #282828;
							font-weight: 500;
						}

						.son_r_top_r {
							display: flex;

							.fatherimg {
								width: 100rpx;
								display: flex;
								align-items: center;
								height: 50rpx;

								.likedTitle {
									width: 40rpx;
									height: 40rpx;
									margin-right: 5rpx;
								}

								.fatsize {
									width: 55rpx;
									overflow: hidden;
									font-size: 20rpx;
									color: #ff0200;
								}
							}
						}
					}

					.son_r_bot {
						width: 565rpx;
						font-size: 23rpx;
						color: #000000;
						word-wrap: break-word;

						.textSize {
							font-size: 22rpx;
							color: #676767;
							margin-left: 30rpx;
						}
					}
				}
			}
		}

		.botom {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 100rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FFFFFF;
			border-top: 1rpx solid #e5e5e5;

			.botominp {
				display: flex;
				align-items: center;
				width: 400rpx;
				height: 100%;

				.inped {
					position: relative;
					width: 100%;
					background-color: #e5e5e5;
					border-radius: 40rpx;
					padding-left: 40rpx;
					box-sizing: border-box;
				}

				.sond {
					position: absolute;
					left: 30rpx;
					top: 30rpx;
					display: flex;
					align-items: center;

					.son_image {
						width: 40rpx;
						height: 40rpx;
					}

					.tetImage {
						margin-left: 20rpx;
						font-size: 27rpx;
						color: #656565;
						font-weight: 500;
					}
				}
			}

			.botomlike {
				height: 60rpx;
				padding: 0 15rpx;
				display: flex;
				align-items: center;

				.likedTitle {
					width: 40rpx;
					height: 40rpx;
				}

				.textLiked {
					font-size: 23rpx;
					color: #000000;
					margin-left: 5rpx;
				}
			}
		}
	}
</style>
